<template>
  <div class="cardBox container-fluid">
    <div class="row justify-content-center">
      <div class="col-9">
        <!-- 内容 -->
        <div class="row justify-content-between">
          <div class="col-md-7  col-12  left">
            <div class="card" v-for="item in result.info" :key="item.id">
              <div class="imgBox">
                <img :src="item.imgUrl" alt="">
              </div>
              <p>{{item.title}}</p>
              <p class="info">
               {{item.info}}
              </p>
            </div>
          </div>
          <!-- 右边 -->
          <div class="col-md-4 col-12 right" v-html="result.head">

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      "result": {
        "head": "<p class='title'>高性能</p><p>Cershop采用异步消息队列、分布式缓存、静态页面等技术使性能大幅提升单机可达1000并发，集群部署可高达10000+并发",

        "info": [
          {
            "id": 0,
            "imgUrl": "http://cereshop.oss-cn-shenzhen.aliyuncs.com/0000/2020/08/67842ece-880b-4037-9ed1-6eaf0e6d7bbf.png",
            "title": "三端楼层装修",
            "info": "库存量单位，即库存进出计量的基单元，也可以说SKU就是库存的最小单位（个、件、盒、托盘等）。每个SKU都拥有不同的编码。U"
          },
          {
            "id": 1,
            "imgUrl": "http://cereshop.oss-cn-shenzhen.aliyuncs.com/0000/2020/08/67842ece-880b-4037-9ed1-6eaf0e6d7bbf.png",
            "title": "商家自主SKU管理",
            "info": "库存量单位，即库存进出计量的基单元，也可以说SKU就是库存的最小单位（个、件、盒、托盘等）。每个SKU都拥有不同的编码。U"
          },
          {
            "id": 2,
            "imgUrl": "http://cereshop.oss-cn-shenzhen.aliyuncs.com/0000/2020/08/67842ece-880b-4037-9ed1-6eaf0e6d7bbf.png",
            "title": "静态页面", "info": "库存量单位，即库存进出计量的基单元，也可以说SKU就是库存的最小单位（个、件、盒、托盘等）。每个SKU都拥有不同的编码。U"
          },

        ]
      }
    }
  }
}
</script>

<style scoped>
.right >>> p:nth-child(1) {
  font-size: 3rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
}
.right >>> p:nth-child(2) {
  font-size: 1.13rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
}
.right >>> p {
  text-align: right;
}
</style>
<style lang="less" scoped>
.cardBox {
  background-color: #f7f7f7;
  .row {
    display: flex;
    align-items: center;
    .left {
      padding: 7.44rem 0;
      width: 100%;
      display: flex;
      align-items: center;
      .card {
        cursor: pointer;
        border: none;
        transition: all 0.4s;
        width: 20rem;
        height: 28.75rem;
        background-color: #5cd0db;
        border-radius: 0rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .imgBox {
          // height: 8.75rem;
          // width: 8.75rem;
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-bottom: 3rem;
          img {
            width: 60%;
          }
        }
        p {
          text-align: center;
          padding: 0 0.5rem;
          color: #fff;
          font-size: 1.5rem;
          font-family: PingFang SC;
          font-weight: bold;
          color: rgba(255, 255, 255, 1);
        }
        .info {
          font-size: 1.13rem !important;
          font-weight: 500 !important;
          height: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          // display: none;
          // width: 0;
          transition: all 0.6s;
        }
      }
      .card:hover {
        // width: 23.75rem;
        // height: 34.38rem;
        // background: rgba(92, 209, 219, 1);
        // box-shadow: 0rem 0rem 1rem 0rem rgba(51, 51, 51, 0.15);
        transform: scale(1.2);
        z-index: 1;
        .info {
          height: 100%;
          // display: inline-block !important;
        }
      }
    }
    .right {
      padding: 7.44rem 0;
      display: flex;
      flex-direction: column;
      justify-items: center;
      //   p {
      //     text-align: right;
      //   }
      //   p:nth-child(1) {
      //     font-size: 3rem;
      //     font-family: PingFang SC;
      //     font-weight: 500;
      //     color: rgba(51, 51, 51, 1);
      //   }
      //   p:nth-child(2) {
      //     font-size: 1.13rem;
      //     font-family: PingFang SC;
      //     font-weight: 400;
      //     color: rgba(102, 102, 102, 1);
      //   }
      // align-items: center;
    }
  }
}
</style>